<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 JUI All rights reserved.
 */

;(function () {

<span id='JUI-Component'>    /**
</span>     * 所有控件的父类
     * @class JUI.Component
     * @extends JUI.Common
     */
    JUI.Class('Component', {
        OPTS: {
<span id='JUI-Component-cfg-renderId'>            /**
</span>             * @cfg {String} renderId 渲染到目标节点的DOM ID
             */
            renderId: null
<span id='JUI-Component-cfg-autoRender'>            /**
</span>             * @cfg {Boolean} autoRender 是否自动渲染
             */
            , autoRender: true
<span id='JUI-Component-cfg-autoHide'>            /**
</span>             * @cfg {Boolean} autoHide 是否一开始隐藏
             */
            , autoHide: false
<span id='JUI-Component-cfg-position'>            /**
</span>             * @cfg {String} position 控件DIV层的position样式
             */
            , position: 'static'
<span id='JUI-Component-cfg-zindex'>            /**
</span>             * @cfg {Number} zindex zindex
             */
            , zindex: 0
        }
<span id='global-method-constructor'>        /**
</span>         * 构造函数
         * @constructor
         * @ignore
         */
        , init: function (opts) {
            this._super(opts);

            this.id = JUI.getId();

            if (this.opts.autoRender) {
                this.render();
            }
        }
<span id='JUI-Component-method-render'>        /**
</span>         * 渲染页面
         * @private
         */
        , render: function () {
            // 页面渲染	
            this.beforeRender();

            var View = this.getViewClass();
            this.view = new View(this);

            this.view.render();

            this.afterRender();
        }
<span id='JUI-Component-method-beforeRender'>        /**
</span>         * render之前的操作
         */
        , beforeRender: function () {

        }
<span id='JUI-Component-method-afterRender'>        /**
</span>         * render之后操作
         */
        , afterRender: function () {
        }
<span id='JUI-Component-method-setNextDo'>        /**
</span>         * 下一次执行动作&lt;br&gt;
         * 如表格数据加载完毕后,勾选某一行:&lt;pre&gt;
         * grid.setNextDo(function(){
	 *    this.checkRow(1);
	 * });
         * &lt;/pre&gt;
         * 由于vue的数据绑定是异步的,我们并不知道数据何时绑定完毕&lt;br&gt;
         * 如果需要在绑定结束后执行某些操作,可以调用这个方法
         */
        , setNextDo: function (callback) {
            callback.call(this);
        }
<span id='JUI-Component-method-getViewClass'>        /**
</span>         * 抽象方法
         * @abstract
         */
        , getViewClass: function () {
            alert('类' + this.getClassName() + '必须重写Component.getViewClass()');
        }
<span id='JUI-Component-method-getView'>        /**
</span>         * @private
         */
        , getView: function () {
            return this.view;
        }
<span id='JUI-Component-method-show'>        /**
</span>         * 显示控件
         */
        , show: function () {
            this.view.show();
        }
<span id='JUI-Component-method-hide'>        /**
</span>         * 隐藏控件
         */
        , hide: function () {
            this.view.hide();
        }
    }, JUI.Common);

})();</pre>
</body>
</html>
